import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Menu} from 'antd';
import {IndexLink} from 'react-router';
import NavLink from '../common/NavLink';

import './style.css';

export default class Header extends Component {
    constructor() {
    	super();
    	this.state = {
    	    current: 'index'
        };

    	this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
        console.log('Click', e);
        this.setState({
            current: e.key
        });
    }
    
    render() {
        return (
            <Menu
                mode="horizontal"
                selectedKeys={[this.state.current]}
                onClick={this.handleClick}
            >
                <Menu.Item key="index">
                    <IndexLink to="/" activeStyle={{color: 'coral'}}>首页</IndexLink>
                </Menu.Item>
                <Menu.Item key="repos">
                    <NavLink to="/repos">Repos</NavLink>
                </Menu.Item>
                <Menu.Item key="about">
                    <NavLink to="/about">About</NavLink>
                </Menu.Item>
            </Menu>
        );
    }
}

Header.propTypes = {

};
